<template>
	<view class="box-c ">
		<view class="calendar">
			<ss-calendar :checks="checks" :choose="choose" @current-month-day="onSignIn" @prev-month-day="onPrev"
				@next-month-day="onNext" />
		</view>
		<view class="schedule" :style="{minHeight:listHeigth+'px'}">
			<view class="schedule-1 animated fadeIn" v-show="isShowSchedule">

				<view class="box d-jc-c" v-for="(classInfo,index) in classInfoList">
					<view class="time">
						<view class="box-c d-jc-c time-title">
							<view class="timebox">
								<view class="lessontime">
									<image class="timeImg" src="../../static/images/shijian@2x.png" mode=""></image>
									<view class="" :class="classInfo.isLine ==1? 'timedata':'timedata1'">{{classInfo.startTime}}-{{classInfo.endTime}}</view>
								</view>
								<view class="lessonshopName">
									{{classInfo.shopName}}
								</view>
							</view>
							
							<view class="classtitle">{{classInfo.title}}</view>
							<view class="classaddress">上课地点：{{classInfo.address}}</view>
						</view>

					</view>
				</view>
				<view class="box d-jc-sa end-line d-ai-c" v-show="classInfoList.length>0">
					<text></text>
					<text>已经到底了</text>
					<text></text>
				</view>
				<view class="box d-jc-sa no-schedule d-ai-c" v-show="classInfoList.length<1">
					今天还没有课程~
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import ssCalendar from '@/components/ss-calendar/ss-calendar.vue'
	export default {
		components: {
			ssCalendar
		},
		data() {
			return {
				checks: [],
				choose: '',
				signFlag: false,
				newDate: '',
				MonthDate: '',
				classInfoList: '',
				isShowSchedule: true,
				listHeigth:0


			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.listHeigth = res.windowHeight - uni.upx2px(750) //windoHeight为窗口高度，主要使用的是这个
					console.log(that.listHeigth)
				}
			})

		},
		components: {
			ssCalendar
		},
		onLoad() {
			this.initDate()
			this.getScheduleByDate(this.newDate)
			this.getScheduleByMonth(this.newDate)
		},
		methods: {
			initDate() {
				//当前时间
				this.newDate = new Date().format("yyyy-MM-dd");
				this.MonthDate = new Date().format("yyyy-MM-dd");
			},
			//获取日历信息(红点)
			getScheduleByMonth(MonthDate) {
				this.$api.getScheduleDate({
					date: MonthDate
				}).then((res) => {
					this.checks = res.data.dataMap
					console.log(res.data.dataMap)

				})
			},
			//获取日程
			getScheduleByDate(date) {
				this.$api.getTeacherScheduleByDate({
					date: date
				}).then((res) => {
					console.log(res.data)
					this.classInfoList = res.data.dataMap
					this.isShowSchedule = true
					if (this.classInfoList.isSign == -1) {
						this.signFlag = false
					} else {
						this.signFlag = true
					}
					console.log(JSON.stringify(res))

				})
			},
			onSignIn(payload,date) {
				this.isShowSchedule = false //用于动画

				const {
					checked,
					year,
					month,
					day
				} = payload
				if(date==undefined){
					date = `${year}-${month}-${day}`
				}
				// console.log('时间：'+date)
				this.choose = date
				this.getScheduleByDate(date);

			},
			onPrev(payload) {
				let date = payload.year + '-' + payload.month + '-' + '01'
				let date2 = payload.year + '-' + payload.month + '-' + '1'
				this.choose=date2
				console.log(date)
				this.getScheduleByMonth(date)
				this.getScheduleByDate(date)
			},
			onNext(payload) {
				let date = payload.year + '-' + payload.month + '-' + '01'
				let date2 = payload.year + '-' + payload.month + '-' + '1'
				console.log(date)
				const {
					checked,
					year,
					month,
					day
				} = payload
				this.choose=date2
				// this.onSignIn(payload,date)
				this.getScheduleByMonth(date)
				this.getScheduleByDate(date)
			}

		}
	}
</script>

<style>
	.timebox{
		display: flex;
		justify-content: space-between;
	}
	.lessonshopName{
		font-size: 32rpx;
		color:#999999;
		
	}
	.lessontime{
		display: flex;
		align-items: center;
	}
	.timedata{
		font-size: 32rpx;
		font-weight: bold;
		color: #999999;
		margin-left: 10rpx;
	}
	.timedata1{
		font-size: 32rpx;
		font-weight: bold;
		color: #666666;
		margin-left: 10rpx;
	}
	.timeImg{
		width: 36rpx;
		height: 36rpx;
	}
	.no-schedule {
		color: #b6b6b6;
	}

	.end-line text:nth-child(1) {
		width: 300rpx;
		height: 1rpx;
		background-color: #d8d8d8;
		margin: 25rpx 0;
	}

	.end-line text:nth-child(2) {
		color: #939393;
		margin: 25rpx 0;
		font-size: 24rpx;
	}

	.end-line text:nth-child(3) {
		width: 300rpx;
		height: 2rpx;
		background-color: #d8d8d8;
		margin: 25rpx 0;
	}

	.active-sign {
		background-color: #FF5551 !important;
	}

	.active-circle {
		border: solid 6rpx #FF5551 !important;
	}

	.active-line {
		background-color: #FF5551 !important;
	}

	
	.classtitle {
		font-size: 32rpx;
		font-weight: bold;
		color: #666666;
	}
	.classaddress {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}
	.sign {
		border-radius: 12rpx;
		background-color: #ccc;
		width: 150rpx;
		color: #fff;
		height: 68rpx;
	}

	.schedule-1 {
		margin-top: 20rpx;
	}

	.schedule {
		background-color: #ebebeb;
		min-height: 490rpx;
	}

	.time {
		width: 630rpx;
		height: 170rpx;
		background-color: #ffffff;
		border-radius: 15rpx;
		padding: 30rpx 30rpx 10rpx 30rpx;
		margin-bottom: 20rpx;
	}

	.plan {
		padding: 0 20rpx 0 0;
	}

	.plan view:first-child {
		width: 18rpx;
		height: 18rpx;
		border: solid 6rpx #d0d0d0;
		border-radius: 50rpx;
	}

	.plan view:last-child {
		width: 4rpx;
		height: 190rpx;
		background-color: #d0d0d0;
	}

</style>
